<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>桂妈圈 - 现代几何 Logo (优化版)</title>
        <style>
            body {
                font-family: 'Microsoft YaHei', sans-serif;
                background-color: #f9f9f9;
                margin: 0;
                padding: 30px;
                color: #333;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
            }
            h1 {
                text-align: center;
                color: #ff9fb5;
                margin-bottom: 40px;
                font-weight: 300;
                font-size: 36px;
            }
            .logo-gallery {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
                gap: 40px;
                margin-bottom: 60px;
            }
            .logo-item {
                background-color: white;
                border-radius: 12px;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
                padding: 30px;
                text-align: center;
                transition: all 0.3s ease;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .logo-item:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
            }
            .logo-title {
                margin-top: 25px;
                font-size: 20px;
                color: #333;
                font-weight: 500;
            }
            .logo-desc {
                color: #666;
                font-size: 16px;
                margin-top: 10px;
                line-height: 1.5;
                max-width: 350px;
            }
            .download-btn {
                margin-top: 25px;
                padding: 12px 24px;
                background-color: #ff9fb5;
                color: white;
                border: none;
                border-radius: 30px;
                cursor: pointer;
                font-size: 16px;
                transition: all 0.3s ease;
                font-weight: 500;
                letter-spacing: 0.5px;
            }
            .download-btn:hover {
                background-color: #ff8ca7;
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(255, 159, 181, 0.3);
            }
        </style>
    </head>
    <body>
        <h1>桂妈圈 - 现代几何 Logo (优化版)</h1>

        <div class="logo-gallery">
            <!-- 设计方案1: 流线连接 -->
            <div class="logo-item">
                <svg width="450" height="450" viewBox="0 0 450 450" xmlns="http://www.w3.org/2000/svg">
                    <!-- 现代几何设计 - 流线连接 -->
                    <g transform="translate(225, 225)">
                        <!-- 几何背景 -->
                        <rect x="-200" y="-200" width="400" height="400" rx="60" ry="60" fill="#F5F5F5" />

                        <!-- 几何元素组合 -->
                        <circle cx="-70" cy="-70" r="60" fill="#FF9FB5" opacity="0.8" />
                        <circle cx="70" cy="70" r="60" fill="#7FDBBD" opacity="0.8" />

                        <!-- 流线连接 -->
                        <path
                            d="M-30,-30 C0,0 0,0 30,30"
                            stroke="#FF9FB5"
                            stroke-width="8"
                            fill="none"
                            stroke-linecap="round"
                            opacity="0.7"
                        />

                        <!-- 装饰元素 -->
                        <circle cx="-120" cy="120" r="20" fill="#FF9FB5" opacity="0.5" />
                        <circle cx="120" cy="-120" r="20" fill="#7FDBBD" opacity="0.5" />
                    </g>
                </svg>
                <div class="logo-title">流线连接</div>
                <div class="logo-desc">优雅的曲线连接两个圆形，创造流动感和和谐感，象征母子间自然而温柔的联系。</div>
                <button class="download-btn" onclick="downloadSVG(0)">下载 Logo</button>
            </div>

            <!-- 设计方案2: 重叠交融 -->
            <div class="logo-item">
                <svg width="450" height="450" viewBox="0 0 450 450" xmlns="http://www.w3.org/2000/svg">
                    <!-- 现代几何设计 - 重叠交融 -->
                    <defs>
                        <clipPath id="intersectionClip">
                            <circle cx="155" cy="155" r="60" />
                            <circle cx="295" cy="295" r="60" />
                        </clipPath>
                    </defs>

                    <g transform="translate(225, 225)">
                        <!-- 几何背景 -->
                        <rect x="-200" y="-200" width="400" height="400" rx="60" ry="60" fill="#F5F5F5" />

                        <!-- 几何元素组合 -->
                        <circle cx="-70" cy="-70" r="60" fill="#FF9FB5" opacity="0.8" />
                        <circle cx="70" cy="70" r="60" fill="#7FDBBD" opacity="0.8" />

                        <!-- 交融区域 -->
                        <path d="M-30,-30 L30,30" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" />

                        <!-- 装饰元素 -->
                        <circle cx="-120" cy="120" r="20" fill="#FF9FB5" opacity="0.5" />
                        <circle cx="120" cy="-120" r="20" fill="#7FDBBD" opacity="0.5" />
                    </g>
                </svg>
                <div class="logo-title">简约连接</div>
                <div class="logo-desc">简洁的白色线条连接两个圆形，创造清晰的视觉焦点，象征纯净而直接的母子联系。</div>
                <button class="download-btn" onclick="downloadSVG(1)">下载 Logo</button>
            </div>

            <!-- 设计方案3: 渐变融合 -->
            <div class="logo-item">
                <svg width="450" height="450" viewBox="0 0 450 450" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="connectGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#FF9FB5" stop-opacity="0.8" />
                            <stop offset="50%" stop-color="#FFFFFF" stop-opacity="0.9" />
                            <stop offset="100%" stop-color="#7FDBBD" stop-opacity="0.8" />
                        </linearGradient>
                    </defs>

                    <!-- 现代几何设计 - 渐变融合 -->
                    <g transform="translate(225, 225)">
                        <!-- 几何背景 -->
                        <rect x="-200" y="-200" width="400" height="400" rx="60" ry="60" fill="#F5F5F5" />

                        <!-- 几何元素组合 -->
                        <circle cx="-70" cy="-70" r="60" fill="#FF9FB5" opacity="0.8" />
                        <circle cx="70" cy="70" r="60" fill="#7FDBBD" opacity="0.8" />

                        <!-- 渐变连接 -->
                        <path
                            d="M-30,-30 C0,0 0,0 30,30"
                            stroke="url(#connectGradient)"
                            stroke-width="12"
                            fill="none"
                            stroke-linecap="round"
                        />

                        <!-- 装饰元素 -->
                        <circle cx="-120" cy="120" r="20" fill="#FF9FB5" opacity="0.5" />
                        <circle cx="120" cy="-120" r="20" fill="#7FDBBD" opacity="0.5" />
                    </g>
                </svg>
                <div class="logo-title">渐变融合</div>
                <div class="logo-desc">
                    渐变色彩的曲线连接，从粉色过渡到薄荷绿，创造柔和的视觉流动，象征母子间情感的自然过渡。
                </div>
                <button class="download-btn" onclick="downloadSVG(2)">下载 Logo</button>
            </div>

            <!-- 设计方案4: 小圆点连接 -->
            <div class="logo-item">
                <svg width="450" height="450" viewBox="0 0 450 450" xmlns="http://www.w3.org/2000/svg">
                    <!-- 现代几何设计 - 小圆点连接 -->
                    <g transform="translate(225, 225)">
                        <!-- 几何背景 -->
                        <rect x="-200" y="-200" width="400" height="400" rx="60" ry="60" fill="#F5F5F5" />

                        <!-- 几何元素组合 -->
                        <circle cx="-70" cy="-70" r="60" fill="#FF9FB5" opacity="0.8" />
                        <circle cx="70" cy="70" r="60" fill="#7FDBBD" opacity="0.8" />

                        <!-- 小圆点连接 -->
                        <circle cx="-35" cy="-35" r="8" fill="#FF9FB5" opacity="0.9" />
                        <circle cx="-17.5" cy="-17.5" r="8" fill="#FF9FB5" opacity="0.7" />
                        <circle cx="0" cy="0" r="8" fill="#FFFFFF" />
                        <circle cx="17.5" cy="17.5" r="8" fill="#7FDBBD" opacity="0.7" />
                        <circle cx="35" cy="35" r="8" fill="#7FDBBD" opacity="0.9" />

                        <!-- 装饰元素 -->
                        <circle cx="-120" cy="120" r="20" fill="#FF9FB5" opacity="0.5" />
                        <circle cx="120" cy="-120" r="20" fill="#7FDBBD" opacity="0.5" />
                    </g>
                </svg>
                <div class="logo-title">点阵连接</div>
                <div class="logo-desc">
                    一系列渐变的小圆点创造连接，从粉色过渡到薄荷绿，中间以白色为过渡，象征成长的阶段和连续性。
                </div>
                <button class="download-btn" onclick="downloadSVG(3)">下载 Logo</button>
            </div>
        </div>

        <script>
            function downloadSVG(index) {
                const svg = document.querySelectorAll('svg')[index];
                const serializer = new XMLSerializer();
                let source = serializer.serializeToString(svg);

                // 添加XML声明
                source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

                // 将SVG转换为Blob
                const svgBlob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
                const svgUrl = URL.createObjectURL(svgBlob);

                // 创建下载链接
                const downloadLink = document.createElement('a');
                downloadLink.href = svgUrl;
                const titles = ['流线连接', '简约连接', '渐变融合', '点阵连接'];
                downloadLink.download = `桂妈圈_${titles[index]}.svg`;
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
            }
        </script>
    </body>
</html>
